/**
 * Generic application styling
 */

body {
  background: #f1f1f1;
}

#qo_app #file_picker {
  margin: 0 auto;
  width: 100px;
}

.error-container {
  width: 450px;
}

.loading-container {
  width: 30px;
}

#loadingPlugin {
  position: absolute;
  top: 20%;
  width: 100px;
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: #777;
  display: inline-block;
  margin-left: 15px;
}

.center-outer-container {
  position: relative;
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  margin: 0 auto;
  height: 100%;
}

.center-inner-container {
  position: absolute;
  top: 35%;
  width: 100%;
}

#spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  opacity: 1.0;
}


/* JELTE TODO: the error handler is reused in the app and in qowt.
   We need to fix that; but for now put the css both in the
   app and qowt. */
#error-icon {
  display: inline-block;
  background-image: url("../img/error_icon_default.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 52px;
  height: 66px;
  padding: 30px;
  vertical-align: bottom;
}

#error-text {
  position: absolute;
  top: 28%;
  display: inline-block;
}

#error-message {
  color: black;
  font-weight: bold;
}

#error-details {
  color: gray;
  font-weight: lighter;
}

#error-link {
  margin-top: 20px;
  color: blue;
  text-decoration: none;
  font-size: 75%;
  cursor: pointer;
}

/**
 * qowt sheet overrides
 */


#qowt-sheet-workbook .qowt-sheet-formula-bar-function-icon {
  background: url('../img/sheet_fx_icon.png') no-repeat center center;
  background-size: 19px 16px;
  margin: 0px 6px 0px 6px;
}

#qowt-sheet-workbook .qowt-sheet-zoom-container {
  bottom: 26px;
}

#qowt-sheet-workbook .qowt-sheet-header,
#qowt-sheet-workbook .qowt-sheet-row-header,
#qowt-sheet-workbook .qowt-sheet-col-header {
  background: #eee;
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10pt;
  color: black;
}
#qowt-sheet-workbook .qowt-sheet-header {
    border: 1px solid #cccccc;
}
#qowt-sheet-workbook .qowt-sheet-col-header {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

#qowt-sheet-workbook .qowt-sheet-row-header {
    border-top: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
}

#qowt-sheet-workbook .qowt-sheet-selection-box {
  border: #aaa ridge;
}

#qowt-sheet-workbook .qowt-sheet-selector {
  background-image: -webkit-linear-gradient(rgb(215, 215, 215), rgb(241, 241, 241));
  height: 26px;
}

/* reset qowt values for the labels */
#qowt-sheet-workbook .qowt-sheet-label,
#qowt-sheet-workbook .qowt-sheet-label:hover,
#qowt-sheet-workbook .qowt-sheet-label:active,
#qowt-sheet-workbook .qowt-sheet-active-label,
#qowt-sheet-workbook .qowt-sheet-active-label:hover {
  background: none;
  -moz-border-bottom-right-radius: 0;
  -khtml-border-bottom-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -khtml-border-bottom-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0;
  margin: 0;
  border-bottom: none;
  text-shadow: none;
  white-space: pre;
}

/* now our own styling */
#qowt-sheet-workbook .qowt-sheet-label {
  position: relative;
  font-size: 10pt;
  font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: inherit;
  color: #777;
  height: 22px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  border: none;
  border-right: 1px solid #aaa;
}

#qowt-sheet-workbook .qowt-sheet-label:hover {
  background: rgb(229, 229, 229);
  color: #444;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}

#qowt-sheet-workbook .qowt-sheet-active-label,
#qowt-sheet-workbook .qowt-sheet-active-label:hover {
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  background: white;
  color: #222;
}

/**
* Word styles
*/

.qowt-uo-img {
  background-image: url('../img/broken_image.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 13px;
}

/**
 * qowt point overrides
 */

.qowt-point-thumbnails-container {
  background: #eeeeee;
}

.qowt-point-thumbnails-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.qowt-point-thumbnails-container::-webkit-scrollbar-button:start:decrement,
.qowt-point-thumbnails-container::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
}

.qowt-point-thumbnails-container::-webkit-scrollbar-button:vertical:increment,
.qowt-point-thumbnails-container::-webkit-scrollbar-button:horizontal:increment {
  background-color: transparent;
  display: block;
  height: 0;
  width: 0;
}

.qowt-point-thumbnails-container::-webkit-scrollbar-track {
  width: 6px;
}

.qowt-point-thumbnails-container::-webkit-scrollbar-track-piece {
  background-color: transparent;
  border: none;
}

.qowt-point-thumbnails-container::-webkit-scrollbar-thumb:vertical {
  background-color: #6f6f6f;
}

.qowt-point-thumbnails-container::-webkit-scrollbar-thumb:horizontal {
  background-color: #6f6f6f;
}

.qowt-point-thumb-placeholder {
  display: block;
  border: 3px solid #d4d4d4;
}

.qowt-point-thumb-placeholder:hover {
  border: 3px solid #a4a4a4;
}

/* point shape selection overlay resize handler css */

/*
* Note: These CSS classes are defined in app layer.
* This enables app specific styling for resize handlers
* e.g. for chrome we can have MS like styling for resize handlers;
* and for android tablet, we can have styling which suites for touch
* based interface
* TODO should we create variant css and put in QOWT
* or put css classes in app css like below ???
*/

/* north resize handler */
.qowt-point-shape-resize-handler-n {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: ns-resize;
  top: -5px;
  left: 50%;
  margin-left: -3px;
}

/* north west resize handler */
.qowt-point-shape-resize-handler-nw {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: nwse-resize;
  top: -5px;
  left: -5px;
}

/* west resize handler */
.qowt-point-shape-resize-handler-w {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  left: -5px;
  top: 50%;
  cursor: ew-resize;
  margin-top: -3px;
}

/* west south resize handler */
.qowt-point-shape-resize-handler-ws {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: nesw-resize;
  bottom: -5px;
  left: -5px;
}

/* south resize handler */
.qowt-point-shape-resize-handler-s {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: ns-resize;
  bottom: -5px;
  left: 50%;
  margin-left: -3px;
}

/* south east resize handler */
.qowt-point-shape-resize-handler-se {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: nwse-resize;
  bottom: -5px;
  right: -5px;
}

/* east resize handler */
.qowt-point-shape-resize-handler-e {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: ew-resize;
  right: -5px;
  top: 50%;
  margin-top: -3px;
}

/* east north resize handler */
.qowt-point-shape-resize-handler-en {
  position: absolute;
  border: 1px solid gray;
  height: 6px;
  width: 6px;
  background-color: white;
  cursor: nesw-resize;
  right: -5px;
  top: -5px;
}

/* shape rotation handler */
.qowt-point-shape-rotation-handler {
  position: absolute;
  height: 25px;
  width: 6px;
  top: -25px;
  left: 50%;
  margin-left: -3px;
}

/* shape rotation handler - line segment div */
.qowt-point-shape-rotation-handler div#rotation_handler_line {
  /*TODO get image from product*/
  background-image: url("../img/Divider.gif");
  background-position-x: -4px;
  position: absolute;
  height: 25px;
  width: 6px;
}

/* shape rotation handler - rotation circle div */
.qowt-point-shape-rotation-handler div#rotation_handler_circle {
  position: absolute;
  height: 12px;
  width: 10px;
  top: -10px;
  left: -1px;

  /*TODO get image from product*/
  background-image: url("../img/circle_green.png");
  background-position-y: -2px;
  background-position-x: -3px;

  /*TODO get proper cursor file and add in below style rule*/
  /*cursor: url("cursor path");*/
}

.qowt-point-move-cursor {
  cursor: move;
  outline: none;
}
